<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
          1.给组件创建一个构造函数, 基于Vue
          2.开始生成虚拟节点， 对组件进行特殊处理 data.hook = { init () {}}
          3.生成dom元素， 如果当前虚拟节点少有hook.init属性，说明是组建
          4.对组件进行 new 组件().$mount()  => vm.$el
          5.将组件的$el 插入到父容器中 (父组件)
     -->


    <!-- render -> vnode -> 真实dom -->
    <div id="app">
        {{arr}}
    </div>
    <script src="dist/vue.js"></script>
    <!-- <script src="node_modules/vue/dist/vue.js"></script> -->
    <script>
        Vue.component("my-button", { // Vue.options.components = {"my-button":fn}
            template: '<button>hello</button>'
        });

        
        const vm = new Vue({ // .__proto__
            el: '#app',
            data:{
                arr:1
            },
            beforeCreate() {
                console.log('beforeCreate', 'parent')
            },
            mounted() {
                console.log('mounted', 'parent')
            },
            components: {
                "my-button": {
                    template: '<button>world</button>',
                    beforeCreate() {
                        console.log('beforeCreate', 'child');
                    },
                    mounted() {
                        console.log('mounted', 'child')
                    },
                }
            }
        });
        vm.arr = [1,2,3];
        setTimeout(() => {
           
            vm.arr.push(5);            
        }, 1000);



        // 内部会将钩子函数 回调函数， 存到一个数组里，当到达某个阶段后依次执行 

        // Vue.options = {beforeCreate:[fn1,fn2]}

        // Vue.mixin({
        //     beforeCreate(){
        //         console.log('before create1')
        //     }
        // })
        // Vue.mixin({
        //     beforeCreate(){
        //         console.log('before create2')
        //     }
        // })
        // const vm = new Vue({ // vm.$options.beforeCreate:[fn1,fn2,fn3]
        //     el: '#app',
        //     beforeCreate(){
        //         console.log('before create3')
        //     }
        // });
    </script>

</body>

</html>